<template>
    <div class="app">
        <!--头部-->
        <!-- <mt-header title="Tide" class="background">
            
        </mt-header> -->
        <mt-header title="Tide" class="background">
            <span  slot="left" @click="go()" v-show="ok">
            <mt-button icon="back"></mt-button>
            </span>
        </mt-header>

        <!--中间内容-->
        <transition>
            <router-view ></router-view>
        </transition>
        <!--底部导航-->
        <nav class="mui-bar mui-bar-tab">
            <router-link id="defaultTab" class="mui-tab-item" to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="/seach">
                <span class="mui-icon mui-icon-search"></span>
                <span class="mui-tab-label">搜索</span>
            </router-link>
            <router-link class="mui-tab-item" to="/plus">
                <span class="mui-icon mui-icon-plus"><span class="mui-badge" id="badge">{{$store.getters.countOption}}</span></span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" to="/contact">
                <span class="mui-icon mui-icon-contact"></span>
                <span class="mui-tab-label">用户</span>
            </router-link>
        </nav>
    </div>

</template>

<script>
export default {
    data(){
        return {
            ok:false,
            
        }
    },
  
    methods:{
     go(){
         //router.push({ name: 'particulars', params: { Id: '123' }})
         //name 是在router.js中的name属性对应的值，params是穿入的参数
         //{path:'/particulars/:id',component:particulars,name:"particulars"},
         //this.$router.push({ path: 'home' });
        this.$router.go(-1);                 
     },
   
    },

    watch: {//可以监听变量的改变
            '$route.path': function (newVal, oldVal) {
                if(newVal==="/home"){
                   this.ok=false;
                }else {
                    this.ok=true;
                }
            },
        },
    
}

</script>

<style>
.background{
       background: rgba(63, 63, 63, 0.49);
    }
.app{
    overflow: hidden;
}
.v-enter{
    opacity: 0;
    transform: translateX(100%)
}
.v-leave-to{
    opacity: 0;
    transform: translateX(-100%)
}
.v-enter-active,.v-leave-active{
    opacity: 0;
    transition: all .5s ease;
}

</style>